<script lang="ts">
	export let options = {
		// Advanced
		seed: 0,
		stop: "",
		temperature: "",
		repeat_penalty: "",
		repeat_last_n: "",
		mirostat: "",
		mirostat_eta: "",
		mirostat_tau: "",
		top_k: "",
		top_p: "",
		tfs_z: "",
		num_ctx: ""
	};
</script>

<div class=" space-y-3 text-xs">
	<div>
		<div class=" py-0.5 flex w-full justify-between">
			<div class=" w-20 text-xs font-medium self-center">Seed</div>
			<div class=" flex-1 self-center">
				<input
					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
					type="number"
					placeholder="Enter Seed"
					bind:value={options.seed}
					autocomplete="off"
					min="0"
				/>
			</div>
		</div>
	</div>

	<div>
		<div class=" py-0.5 flex w-full justify-between">
			<div class=" w-20 text-xs font-medium self-center">Stop Sequence</div>
			<div class=" flex-1 self-center">
				<input
					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
					type="text"
					placeholder="Enter Stop Sequence"
					bind:value={options.stop}
					autocomplete="off"
				/>
			</div>
		</div>
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Temperature</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.temperature = options.temperature === "" ? 0.8 : "";
				}}
			>
				{#if options.temperature === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.temperature !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="1"
						step="0.05"
						bind:value={options.temperature}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.temperature}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Mirostat</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.mirostat = options.mirostat === "" ? 0 : "";
				}}
			>
				{#if options.mirostat === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.mirostat !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="2"
						step="1"
						bind:value={options.mirostat}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.mirostat}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Mirostat Eta</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.mirostat_eta = options.mirostat_eta === "" ? 0.1 : "";
				}}
			>
				{#if options.mirostat_eta === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.mirostat_eta !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="1"
						step="0.05"
						bind:value={options.mirostat_eta}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.mirostat_eta}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Mirostat Tau</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.mirostat_tau = options.mirostat_tau === "" ? 5.0 : "";
				}}
			>
				{#if options.mirostat_tau === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.mirostat_tau !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="10"
						step="0.5"
						bind:value={options.mirostat_tau}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.mirostat_tau}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="10"
						step="0.5"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Top K</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.top_k = options.top_k === "" ? 40 : "";
				}}
			>
				{#if options.top_k === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.top_k !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="100"
						step="0.5"
						bind:value={options.top_k}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.top_k}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="100"
						step="0.5"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Top P</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.top_p = options.top_p === "" ? 0.9 : "";
				}}
			>
				{#if options.top_p === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.top_p !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="1"
						step="0.05"
						bind:value={options.top_p}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.top_p}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="1"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Repeat Penalty</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.repeat_penalty = options.repeat_penalty === "" ? 1.1 : "";
				}}
			>
				{#if options.repeat_penalty === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.repeat_penalty !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="2"
						step="0.05"
						bind:value={options.repeat_penalty}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.repeat_penalty}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Repeat Last N</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.repeat_last_n = options.repeat_last_n === "" ? 64 : "";
				}}
			>
				{#if options.repeat_last_n === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.repeat_last_n !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="-1"
						max="128"
						step="1"
						bind:value={options.repeat_last_n}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.repeat_last_n}
						type="number"
						class=" bg-transparent text-center w-14"
						min="-1"
						max="128"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Tfs Z</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.tfs_z = options.tfs_z === "" ? 1 : "";
				}}
			>
				{#if options.tfs_z === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.tfs_z !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="0"
						max="2"
						step="0.05"
						bind:value={options.tfs_z}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div>
					<input
						bind:value={options.tfs_z}
						type="number"
						class=" bg-transparent text-center w-14"
						min="0"
						max="2"
						step="0.05"
					/>
				</div>
			</div>
		{/if}
	</div>

	<div class=" py-0.5 w-full justify-between">
		<div class="flex w-full justify-between">
			<div class=" self-center text-xs font-medium">Context Length</div>

			<button
				class="p-1 px-3 text-xs flex rounded transition"
				type="button"
				on:click={() => {
					options.num_ctx = options.num_ctx === "" ? 2048 : "";
				}}
			>
				{#if options.num_ctx === ""}
					<span class="ml-2 self-center"> Default </span>
				{:else}
					<span class="ml-2 self-center"> Custom </span>
				{/if}
			</button>
		</div>

		{#if options.num_ctx !== ""}
			<div class="flex mt-0.5 space-x-2">
				<div class=" flex-1">
					<input
						id="steps-range"
						type="range"
						min="1"
						max="16000"
						step="1"
						bind:value={options.num_ctx}
						class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
					/>
				</div>
				<div class="">
					<input
						bind:value={options.num_ctx}
						type="number"
						class=" bg-transparent text-center w-14"
						min="1"
						max="16000"
						step="1"
					/>
				</div>
			</div>
		{/if}
	</div>
</div>
